<template>
  <div>
    <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen
      @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
    
      <a-spin :spinning="confirmLoading">
        <a-form :form="form">
    
          <div @click="toOpenHis" style="margin-bottom: 20px;display: flex;justify-content: flex-end;">
            <a-button type="primary">历史</a-button>
          </div>
    
          <div v-for="(item,index) in list" :key="index" style="margin-bottom: 20px;">
            <div style="color: #333;font-size: 18px;font-weight: 600;">{{item.rawMaterialName}}</div>
            <div style="display: flex;align-items: center;">
              <div style="display: flex;align-items: center;">
                <div style="color: rgba(0, 0, 0, 0.85);font-size: 14px;margin-right: 10px;">挂牌价：</div>
                <a-input-number v-model="item.listPrice" />
              </div>
              <div style="display: flex;align-items: center;margin-left: 30px;">
                <div style="color: rgba(0, 0, 0, 0.85);font-size: 14px;margin-right: 10px;">优惠价：</div>
                <a-input-number v-model="item.preferentialPrice" />
              </div>
            </div>
          </div>
    
        </a-form>
      </a-spin>
    </a-modal>
    
    <YsyOilRawMaterialPriceList ref='hisRef' @ok='confirmOk'></YsyOilRawMaterialPriceList>
  </div>
</template>

<script>
  import {
    httpAction,
    getAction,
    postAction
  } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import YsyOilRawMaterialPriceList from './YsyOilRawMaterialPriceList'

  export default {
    components: {
      YsyOilRawMaterialPriceList
    },
    name: "YsyOilRawMaterialPriceModal",
    data() {
      return {
        title: "操作",
        visible: false,
        model: {},
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {
          oilRawMaterialPriceId: {
            rules: [{
              required: true,
              message: '请输入油原料价格id!'
            }]
          },
        },
        url: {
          add: "/app/ysyOilRawMaterialPrice/add",
          edit: "/app/ysyOilRawMaterialPrice/edit",
          oilList: "/app/ysyRowMaterialRefinery/list",
          bathAdd: "/app/ysyOilRawMaterialPrice/bathAdd"
        },
        refineryId: '',
        list: []
      }
    },
    created() {},
    methods: {
      confirmOk() {
        this.close()
      },
      toOpenHis() {
        this.$refs.hisRef.add(this.refineryId)
      },
      add() {
        this.edit({});
      },
      edit(record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        if (record.refineryId) {
          this.refineryId = record.refineryId
        }
        this.getDataList()
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'oilRawMaterialPriceId', 'oilRawMaterialId', 'refineryId',
            'listPrice', 'preferentialPrice'))
          //时间格式化
        });

      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        const that = this;
        postAction(this.url.bathAdd, this.list).then((res) => {
          if (res.success) {
            this.$emit('ok');
            that.$message.success('操作成功');
          } else {
            that.$message.error('操作失败');
          }
          this.close()
        }).finally(() => {})
      },
      handleCancel() {
        this.close()
      },
      getDataList() {
        let params = {
          pageNo: 1,
          pageSize: 9999,
          refineryId: this.refineryId
        }
        getAction(this.url.oilList, params).then((res) => {
          this.list = res.result.records
          this.list.forEach(item => {
            this.$set(item, 'preferentialPrice', 0)
            this.$set(item, 'listPrice', 0)
            this.$set(item, 'refineryId', this.refineryId)
          })
        }).finally(() => {})
      }

    }
  }
</script>

<style lang="less" scoped>

</style>